<template>
  <Modal
    v-model="showCreateModuleModal"
    title="创建模块"
    :mask-closable="false"
    @on-cancel="handleCreateModuleCancel(false)"
  >
    <Form
      label-position="right"
      :label-width="80"
      ref="moduleForm"
      :model="moduleForm"
      :rules="moduleValidate"
    >
      <FormItem label="模块名称" prop="name">
        <Input clearable v-model="moduleForm.name" />
      </FormItem>
      <FormItem label="所属项目" prop="project">
        <Select v-model="moduleForm.project" clearable filterable>
          <Option
            v-for="item in projects"
            :value="item.id"
            :key="item.id"
            :label="item.name"
          />
        </Select>
      </FormItem>
      <FormItem label="备注">
        <Input
          type="textarea"
          clearable
          v-model="moduleForm.remark"
          :rows="4"
        />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="default" @click="handleCreateModuleCancel(false)"
        >取消</Button
      >
      <Button type="primary" @click="handleCreateModuleSubmit('moduleForm')"
        >确定</Button
      >
    </div>
  </Modal>
</template>

<script>
import { createModule } from "@/api/HttpAutoTestService/module";
import { getProjectNames } from "@/api/HttpAutoTestService/project";

export default {
  name: "module-create",
  props: {
    createModule: {
      type: Boolean,
      default: false,
    },
    parentModule: {
      type: String,
      default: "",
    },
    projectId: {
      type: String,
      default: "",
    },
  },
  watch: {
    createModule(val) {
      if (val && this.projectId === "") {
        // 在模块列表中创建模块
        getProjectNames()
          .then((res) => {
            this.projects = res.data;
          })
          .catch((err) => {
            this.$Modal.error({
              title: "系统异常，请联系管理员……",
              content: JSON.stringify(err),
              closable: true,
            });
          });
      }
    },
    projectId(val) {
      if (this.showCreateModuleModal && val !== "") {
        // 在项目列表中创建模块
        getProjectNames()
          .then((res) => {
            this.projects = res.data;
            this.moduleForm.project = val;
          })
          .catch((err) => {
            this.$Modal.error({
              title: "系统异常，请联系管理员……",
              content: JSON.stringify(err),
              closable: true,
            });
          });
      }
    },
  },
  computed: {
    showCreateModuleModal: {
      get() {
        return this.createModule;
      },
      set(val) {
        this.$emit("update:createModule", val);
        this.$emit("update:parentModule", "");
        this.$emit("update:projectId", "");
      },
    },
  },
  data() {
    return {
      moduleForm: {
        name: "",
        parent: "",
        project: "",
        remark: "",
      },
      moduleValidate: {
        name: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          {
            type: "string",
            max: 20,
            message: "模块名称最多由20个字符组成",
            trigger: "blur",
          },
        ],
        project: [
          { required: true, message: "请选择所属项目", trigger: "change" },
        ],
      },
      projects: [],
    };
  },
  methods: {
    handleCreateModuleCancel(continueCreate) {
      this.moduleForm = {
        name: "",
        parent: "",
        project: "",
        remark: "",
      };
      this.$refs["moduleForm"].resetFields();
      if (!continueCreate) {
        // 不再继续创建模块，关闭弹框，刷新列表
        this.showCreateModuleModal = false;
        this.$emit("initModuleTable");
        this.$emit("formatModuleTreeData");
      }
    },

    handleCreateModuleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.parentModule) {
            this.moduleForm.parent = this.parentModule;
          }
          createModule(this.moduleForm)
            .then((res) => {
              if (res.status === 201) {
                let config = {
                  title: "创建成功",
                  content: "是否继续创建？？？",
                  okText: "继续",
                  onOk: () => {
                    this.handleCreateModuleCancel(true);
                  },
                  onCancel: () => {
                    this.handleCreateModuleCancel(false);
                  },
                };
                this.$Modal.confirm(config);
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Modal.error({
                title: "系统异常，请联系管理员……",
                content: JSON.stringify(err),
                closable: true,
              });
            });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
